import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import '../../common/config.dart';
import '../../generated/assets.dart';
import '../../router/extension/router.dart';

class BestWayScreen extends StatefulWidget {
  /// Constructs a [BestWayScreen]
  const BestWayScreen({super.key});

  @override
  State<BestWayScreen> createState() => _BestWayScreenState();
}

class _BestWayScreenState extends State<BestWayScreen> {
  final String title = Config.appName;

  final List<_BestWay> items = [
    _BestWay(
      cover: Assets.imageC1,
      title: '1. Network and Connect',
      url: Assets.htmlC1,
    ),
    _BestWay(
      cover: Assets.imageC2,
      title: '2. Growth Mindset',
      url: Assets.htmlC2,
    ),
    _BestWay(
      cover: Assets.imageC3,
      title: '3. Be Confident',
      url: Assets.htmlC3,
    ),
    _BestWay(
      cover: Assets.imageC4,
      title: '4. Be Positive',
      url: Assets.htmlC4,
    ),
    _BestWay(
      cover: Assets.imageC5,
      title: '5. Be Grateful',
      url: Assets.htmlC5,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          onTap: () {
            context.pop();
          },
          child: const Padding(
            padding: EdgeInsets.all(16),
            child: Icon(Icons.arrow_back_ios, color: Colors.white),
          ),
        ),
        title: Text(title, style: const TextStyle(fontSize: 18)),
      ),
      body: SafeArea(
        child: ListView.builder(
          itemBuilder: item,
          itemCount: items.length,
        ),
      ),
    );
  }

  Widget item(BuildContext context, int index) {
    final _BestWay item = items[index];
    return GestureDetector(
      onTap: () => onClickItem(item),
      behavior: HitTestBehavior.opaque,
      child: Container(
        height: 120,
        padding: const EdgeInsets.symmetric(horizontal: 8).copyWith(top: 8),
        child: Card(
          color: const Color(0xff232428),
          child: Row(
            children: [
              AspectRatio(
                aspectRatio: 1.33,
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(item.cover),
                      fit: BoxFit.fitHeight,
                    ),
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(8),
                      bottomLeft: Radius.circular(8),
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 8),
              Expanded(child: Text(item.title, textAlign: TextAlign.left)),
              Container(
                width: 100,
                height: 50,
                margin: const EdgeInsets.only(left: 4, right: 8),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void onClickItem(_BestWay item) {
    context.page(item.url);
  }
}

class _BestWay {
  final String cover;
  final String title;
  final String url;

  _BestWay({required this.cover, required this.title, required this.url});
}
